import * as echarts from 'echarts';

export function lefttopEchart() {
  var charts = { // 按顺序排列从大到小
    cityList: ['衡水', '石家庄', '张家口', '邯郸' ],
    cityData: [50, 30, 18, 16]
  }
  var top10CityList = charts.cityList
  var top10CityData = charts.cityData
  var color = ['#FFD530', '#00FFD8', '#4AB9FF']
  var color1 = ['#ffb349', '#70e9fc', '#4aa4ff']

  let lineY = []
  let lineT = []
  for (var i = 0; i < charts.cityList.length; i++) {
    var x = i
    if (x > 1) {
      x = 2
    }
    var data = {
      name: charts.cityList[i],
      color: color[x],
      value: top10CityData[i],
      barGap: '-100%',
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: color[x]
          }, {
            offset: 1,
            color: color1[x]
          }], false),
          barBorderRadius: 10
        },
        emphasis: {
          shadowBlur: 15,
          shadowColor: 'rgba(0, 0, 0, 0.1)'
        }
      }
    }
    var data1 = {
      value: 100,
      itemStyle: {
        color: 'rgba(255,255,255,0.5)',
        barBorderRadius: 10
      }
    }
    lineY.push(data)
    lineT.push(data1)
  }
  var backTop = []
  for (var i = top10CityData.length - 1; i >= 0; i--) {
    backTop.push((top10CityData[i]))
  }
  return {
    tooltip: {
      show: false,
    },
    grid: {
      borderWidth: 0,
      top: '2%',
      left: '5%',
      right: '15%',
      bottom: '0%'
    },
    color: color,
    yAxis: [{
      type: 'category',
      inverse: true,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false,
        inside: false
      },
      data: top10CityList
    }, {
      type: 'category',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        color: '#fff',
        align: 'right',
        margin: 60,
        fontSize: 16,
        formatter: function (val) {
          return val +'万亩'
        },
      },
      splitArea: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: backTop
    }],
    xAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    series: [{
      name: 'total',
      type: 'bar',
      zlevel: 1,
      barGap: '-100%',
      barWidth: 3,
      data: lineT,
      legendHoverLink: false
    }, {
      name: 'bar',
      type: 'bar',
      zlevel: 2,
      barWidth: 3,
      data: lineY,
      label: {
        normal: {
          color: '#b3ccf8',
          show: true,
          position: [0, '-24px'],
          textStyle: {
            fontSize: 16
          },
          formatter: function (a) {
            var num = ''
            var str = ''
            num = 'NO.' + (a.dataIndex + 1);
            if (a.dataIndex === 0) {
              str = '{color1|' + num + '} {color4|' + a.name + '}'
            } else if (a.dataIndex === 1) {
              str = '{color2|' + num + '} {color4|' + a.name + '}'
            } else {
              str = '{color3|' + num + '} {color4|' + a.name + '}'
            }
            return str;
          },
          rich: {
            color1: {
              color: '#ff9500',
              fontWeight: 700,
              fontSize: 16
            },
            color2: {
              color: '#02d8f9',
              fontWeight: 700,
              fontSize: 16
            },
            color3: {
              color: '#027fff',
              fontWeight: 700,
              fontSize: 16
            },
            color4: {
              color: '#e5eaff',
              fontSize: 16
            }
          }
        }
      }
    }],
  }
}
export function leftbotEchart() {
  const colorList = ["#fff", '#FFD42A', '#fe9a8b', '#F56948', '#9E87FF']
  return {
    legend: {
      icon: 'circle',
      bottom: '0',
      left: 'center',
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#556677',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0
        },
        lineStyle: {
          width: 0
        }
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#5c6c7c'
      },
      padding: [10, 10],
      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
    },
    grid: {
      top: '15%',
      left: 60,
      right: 60,
      bottom: 50
    },
    xAxis: [{
      type: 'category',
      data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021'],
      axisLine: {
        lineStyle: {
          color: '#DCE2E8'
        }
      },
      axisTick: {
        show: true,
        length: 10,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#7EBBFF'
        },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 15
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(126, 187, 255, .6)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(126, 187, 255, .6)'
        }
      },

      boundaryGap: false
    }],
    yAxis: [{
      type: 'value',
      name: '万元',
      axisTick: {
        show: true,
        length: 10,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(126, 187, 255, .6)'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(126, 187, 255, .6)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(126, 187, 255, .6)'
        }
      }
    }, {
      name: '同比趋势',
      type: 'value',
      position: 'right',
      axisTick: {
        show: true,
        length: 10,
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(126, 187, 255, .6)'
        },
        formatter: '{value}%'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(126, 187, 255, .6)'
        }
      },
      splitLine: {
        show: false,
      }
    }],
    series: [{
        name: '金额',
        type: 'line',
        data: [1000, 1000, 3000, 1200, 1500, 3000, 1000],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 3,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#fff'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ]),
          shadowColor: 'rgba(255,255,255,0.5)',
          shadowBlur: 10,
          shadowOffsetY: -5
        },
        itemStyle: {
          normal: {
            color: colorList[0],
            borderColor: colorList[0]
          }
        }
      },
      {
        name: '同比',
        type: 'line',
        data: [10, 20, 50, 40, 50, 60, 100],
        symbolSize: 1,
        yAxisIndex: 1,
        symbol: 'circle',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 3,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#FFD42A'
            },
            {
              offset: 1,
              color: '#FFD42A'
            }
          ]),
          shadowColor: 'rgba(255, 212, 42, .5)',
          shadowBlur: 10,
          shadowOffsetY: 0
        },
        itemStyle: {
          normal: {
            color: colorList[1],
            borderColor: colorList[1],
          }
        }
      }
    ]
  };
}
export function rightEchart() {
  var dataStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      shadowBlur: 40,
      borderWidth: 10,
      borderRadius: 10,
      // shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
    }
  };
  var placeHolderStyle = {
    normal: {
      color: 'rgba(0,0,0,0)',
      label: {
        show: false
      },
      labelLine: {
        show: false
      }
    },
    emphasis: {
      color: '#393d50'
    }
  };
  return {
    title: {
      text: '100\n总计',
      x: 'center',
      y: 'center',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 20,
        color: "#fff",
      }
    },
    tooltip: {
      trigger: 'item',
      show: true,
      formatter: "{b} : <br/>{c}公顷",
      // backgroundColor: 'rgba(0,0,0,0.7)', // 背景
      padding: [8, 10], //内边距
      // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
    },
    legend: {
      orient: 'horizontal',
      // icon: 'circle',
      left: 'center',
      bottom: 0,
      itemGap: 20,
      data: ['水浇地', '旱地', '草地', '水田'],
      textStyle: {
        color: '#fft'
      }
    },
    series: [{
        name: 'Line 1',
        type: 'pie',
        clockWise: true,
        radius: ["70%", '80%'],
        center: ['50%', '50%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        label: {
          borderRadius: '0',
        },
        data: [{
            value: 59,
            name: '水浇地',
            label: {
              show: true,
              borderWidth: 0,
              color: '#34A6D2',
              formatter: '{b}{c}公顷',
            },
            labelLine: {
              length: 10,
              show: true
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#34A6D2'
                }, {
                  offset: 1,
                  color: '#34A6D2'
                }])
              }
            }
          },
          {
            value: 41,
            name: '',
            tooltip: {
              show: false
            },
            itemStyle: placeHolderStyle
          },
        ]
      },
      {
        name: 'Line 2',
        type: 'pie',
        clockWise: true,
        radius: ["55%", '65%'],
        center: ['50%', '50%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        data: [{
            value: 65,
            name: '旱地',
            label: {
              show: true,
              borderWidth: 0,
              color: '#BE9B33',
              formatter: '{b} {c}公顷',
            },
            labelLine: {
              length: 30,
              show: true
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#BE9B33'
                }, {
                  offset: 1,
                  color: 'rgba(176, 152, 59, .1)'
                }])
              }
            }
          },
          {
            value: 35,
            name: '',
            tooltip: {
              show: false
            },
            itemStyle: placeHolderStyle
          },
        ]
      },
      {
        name: 'Line 3',
        type: 'pie',
        clockWise: true,
        radius: ["40%", '50%'],
        center: ['50%', '50%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        data: [{
            value: 26,
            name: '草地',
            label: {
              show: true,
              borderWidth: 0,
              color: '#74E5C8',
              formatter: '{b} {c}公顷',
            },
            labelLine: {
              length: 50,
              show: true
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#74E5C8'
                }, {
                  offset: 1,
                  color: '#74E5C8'
                }]),
              }
            }
          },
          {
            value: 74,
            name: '',
            tooltip: {
              show: false
            },
            itemStyle: placeHolderStyle
          },
        ]
      },
      {
        name: 'Line 4',
        type: 'pie',
        clockWise: true,
        radius: ["25%", '35%'],
        center: ['50%', '50%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        startAngle: 90,
        data: [{
            value: 36,
            name: '水田',
            label: {
              show: true,
              borderWidth: 0,
              color: '#fff',
              position: 'inside',
              formatter: '{b} {c}公顷',
            },
            labelLine: {
              length: 0,
              show: true
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#3E61E4'
                }, {
                  offset: 1,
                  color: 'rgba(62, 97, 228, .1)'
                }]),
              }
            }
          },
          {
            value: 64,
            name: '',
            tooltip: {
              show: false
            },
            itemStyle: placeHolderStyle
          },
        ]
      }
    ]
  };
}